<template>
  <div class="app-container">

    <!-- <div class="main">
      <el-input
        style="width: 300px"
        ref="washCodeInput"
        placeholder="请扫码水洗码"
        v-model="washCode"
        @keyup.enter.native="search"
        id="washCode"
      >
        <template slot="append">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </template>
      </el-input>
    </div> -->



    <Ywyj :scene="scene"></Ywyj>
  </div>
</template>

<script>
import { getOrderDetailByMulType } from "@/api/order/index";
import Ywyj  from './inStorage/components/Ywyj.vue';

export default {
  components: {
    Ywyj
  },
  data() {
    return {
      scene:"zhijian",
      washCode: "",
      printWashCodeIds: [],
    };
  },
  mounted() {
    // 确保 DOM 渲染完成后自动聚焦
    // this.$nextTick(() => {
    //   this.$refs.washCodeInput.focus();
    // });
  },
  methods: {
    async search() {
      // 250329sl300913250916sl10600
      
      // 250329sl809476

      const { data } = await getOrderDetailByMulType(this.washCode);
      const index = data.shoePoList.findIndex(
        (item) => item.washCode === this.washCode
      );

      if (index === -1) {
        this.$message.error("水洗码不存在");
        return;
      }

      const item = data.shoePoList[index];

      this.printWashCodeIds = [
        {
          washCode: item.washCode,
          srgCode: item.srgCode,
          phone: item.phone,
          washType: item.washType,
          index: `${index + 1}/${data.shoePoList.length}`,
        },
      ];

      setTimeout(() => {
        this.washCode = "";
        this.$nextTick(() => {
          this.$refs.washCodeInput.focus();
        });
      }, 200);
    },
  },
};
</script>

<style lang="scss">
.app-container.check-out {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
